<template>
  <a-form :form="form">
    <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="梯度件数"
        extra="当购买此商品SKU件数大于等于此值时，梯度价格将生效"
    >
      <a-input-number id="inputNumber" :min="0"  @change="onChange" v-decorator="[
          'unit.count',
         { rules: [{ required: true,  type: 'number',message:'请输入'}]},
        ]"/>

    </a-form-item>
    <a-form-item label="用户类型"
                 :label-col="formItemLayout.labelCol"
                 :wrapper-col="formItemLayout.wrapperCol">
      <a-radio-group name="radioGroup"  v-decorator="[
          'unit.type', { rules: [{ required: true, type: 'number', message:'请选择',initialValue: 0 }]} ]">
        <a-radio :value="2">
          代理商
        </a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item
                 :label-col="formItemLayout.labelCol"
                 :wrapper-col="formItemLayout.wrapperCol">
      <a-button type="dashed">
        +添加商品
      </a-button>
    </a-form-item>
    <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" bordered :data-source="dataSource" :columns="columns" :pagination="false" :scroll="{ x:'100%' }">
      <template slot="sku.specValues" slot-scope="text, record" >
        <div class="img-name">
          <img class="show-img" :src="record.sku.image" alt="">
          <div class="id-name">
            <span class="name">{{record.sku.specValues}}</span>
          </div>
        </div>
      </template>
      <template slot="price" slot-scope="text, record" >
        <div>
          <a-input-number id="inputNumber" v-model="record.price" :min="0" :step="0.01" @change="(record)=>onChange(record)" />
        </div>
      </template>
    </a-table>
    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
      <a-button type="primary" @click="check">
        提交
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import code from '@/common/code'
import {getBrandDetail, editBrand, getGradientPriceDetail, editGradientPrice} from '@/api'
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};
export default {
  name: "brand-edit",
  data() {
    return {
      selectedRowKeys: [],
      unit:{

      },
      token:localStorage.getItem('token')||'',
      uploadApi: '/admin-api/common/uploadFile',
      loading: false,
      imageUrl: '',
      value: 1,
      size:'default',
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
      dataSource: [], //表格的数据源
      columns: [
        {
          title: '商品信息',
          dataIndex: 'sku.specValues',
          width: 200,
          align:'left',
          fixed:'left',
          scopedSlots: { customRender: 'sku.specValues' },
        },
        {
          title: 'SPU编号',
          dataIndex: 'spuId',
          width: 200,
          align:'center',
        },
        {
          title: 'SKU编号',
          dataIndex: 'skuId',
          width: 200,
          align:'center',
        },
        {
          title: '可售库存',
          dataIndex: 'sku.stock',
          width: 200,
          align:'center',
        },
        {
          title: '销售价',
          dataIndex: 'sku.shopChannelPrice',
          width: 200,
          align:'center',
        },
        {
          title: '代理价',
          dataIndex: 'sku.isDefault',
          width: 200,
          align:'center',
        },
        {
          title: '成本价',
          dataIndex: 'sku.costPrice',
          width: 200,
          align:'center',
        },
        {
          title: '梯度价',
          dataIndex: 'price',
          width: 200,
          align:'center',
          scopedSlots: { customRender: 'price' },
        },

      ],
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onChange(record) {
      console.log(record)
    },
    //提交
    check() {
      this.form.validateFields(async (err,values)=> {
        if (!err) {
          if (this.$route.query.id) {
            values.unit.id = this.$route.query.id
          }
          values.unit.priceSkuList=this.dataSource.map(item=>{
            return {
              skuId:item.skuId,
              price:item.price,
            }
          })
          values.unit.spuId=this.dataSource[0].spuId
          await editGradientPrice(values.unit)
          this.$message.success('操作成功')
          this.$router.push('/shop/gradient-price')
        }
      });
    },
    handleChange (e) {
      if (e.file.status === 'done') {
        if (e.file.response.code === code.SUCCESS) {
          this.unit.image = e.file.response.value
          // this.$emit('change', this.imageUrl)
        } else {
          this.$message.error(e.file.response.message)
        }
        this.loading = false
      }

    },
    //品牌详情
    async getBrandDetailFn(){
     const res= await getGradientPriceDetail(this.$route.query.id)
      this.unit=res.value
      this.dataSource=this.unit.list
      this.form.setFieldsValue({
        'unit.count': this.unit.count,
        'unit.type': this.unit.type,
      });
    }
  },
  mounted(){
    if(this.$route.query.id){
      this.getBrandDetailFn()
    }

  }
};
</script>


<style scoped lang="less">

.img-up{
  width: 100%;
  height: 100%;
}
.img-name{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.show-img{
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.name{
  width: 200px;
  /* 2.设置旧版弹性盒 */
  display: -webkit-box;
  /* 3. 控制行数*/
  -webkit-line-clamp: 2;
  /* 4. 设置子元素的排列方式  垂直排列*/
  -webkit-box-orient: vertical;
  /* 5.溢出隐藏 */
  overflow: hidden;
}
</style>
